<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10 flex jbetween">
      <div>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="70px"
          class="fnmb talj"
        >
          <el-form-item label="单据号">
            <el-input
              v-model="queryParams.Order"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input
              v-model="queryParams.Name"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="授课形式">
            <el-select
              v-model="queryParams.Mode"
              clearable
              placeholder="请选择"
              style="width: 212px"
            >
              <el-option label="理论" value="理论" />
              <el-option label="实操" value="实操" />
            </el-select>
          </el-form-item>
          <el-form-item label="授课教师">
            <Selector
              v-model="queryParams.Teacher"
              style="width: 212px"
              category="用户列表"
              :query="{
                Type: 2
              }"
            ></Selector>
          </el-form-item>
          <el-form-item label="开始时间" v-show="DeveType == 2">
            <MyDateTime v-model="queryParams.StartTime"></MyDateTime>
          </el-form-item>
          <el-form-item label="结束时间" v-show="DeveType == 2">
            <MyDateTime v-model="queryParams.EndTime"></MyDateTime>
          </el-form-item>
          <el-form-item label="教学场地" v-show="DeveType == 2">
            <Selector
              v-model="queryParams.Place"
              style="width: 212px"
              category="场地级联"
              cascader="级联"
            ></Selector>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex acenter jend fnw">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="[]"
      :customBtn="customBtn"
      @getList="getList"
      @custom="handleCustom"
      @delete="handleDelete"
      @link="handleLink"
    >
      <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['Development:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >申请新课程</el-button
        >
        <el-button
          type="primary"
          v-show="UserInfo.Type == 3"
          @click="handleSetApproval"
          >设置评审人员</el-button
        >
      </template>
      <template v-slot:secondRow>
        <el-tabs
          type="card"
          class="mgt10"
          v-model="DeveType"
          @tab-click="handleTabClick"
        >
          <el-tab-pane label="待初审" name="1"></el-tab-pane>
          <el-tab-pane label="待试讲" name="2"></el-tab-pane>
          <el-tab-pane label="待终审" name="3"></el-tab-pane>
          <el-tab-pane label="已关闭" name="4"></el-tab-pane>
        </el-tabs>
      </template>
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="1000"
      @confirm="CreateStartCheck"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="80"
        ref="formRef"
        class="wid100"
      >
        <el-row>
          <MyCol>
            <el-form-item label="课程名称" prop="DevCourse.Name">
              <el-input
                v-model="formData.DevCourse.Name"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="课程类型" prop="DevCourse.ID_Type">
              <Selector
                category="课程类型"
                v-model="formData.DevCourse.ID_Type"
              ></Selector>
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="授课形式" prop="DevCourse.Mode">
              <el-select
                v-model="formData.DevCourse.Mode"
                clearable
                placeholder="请选择"
              >
                <el-option label="理论" value="理论" />
                <el-option label="实操" value="实操" />
              </el-select>
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="授课老师">
              {{ UserInfo.Name }}
              <!-- <Selector
                category="用户列表"
                v-model="formData.DevCourse.TeacherID"
                :query="{
                  Type: 2
                }"
              ></Selector> -->
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="教案文件" prop="LessonPlan">
              <FileUpload v-model:fileList="formData.LessonPlan"></FileUpload>
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="课件文件" prop="Courseware">
              <FileUpload v-model:fileList="formData.Courseware"></FileUpload>
            </el-form-item>
          </MyCol>
        </el-row>
      </el-form>
      <hr style="border-color: #e4e7ed; opacity: 0.3" />
      <div class="title mgb10">教学设备</div>
      <MyTable
        :tableList="deviceList"
        :columns="ChooseDdeviceColumns"
        :btnList="['delete']"
        @delete="handleDeviceDelete"
        :toolbar="false"
      >
        <template v-slot:tabTop>
          <el-button type="primary" @click="ShowChooseDevice = true"
            >选 择</el-button
          >
        </template>
      </MyTable>
    </MyDialog>
    <MyDialog
      v-model:show="ShowChooseDevice"
      title="设备选择"
      :destroy="true"
      :width="1000"
      @confirm="submitBindDevice"
    >
      <DeviceTable
        v-model:checkList="bindDeviceData"
        :deviceColumns="deviceColumns"
      ></DeviceTable>
    </MyDialog>
    <MyDialog
      v-model:show="ShowStartCheck"
      title="初审审核"
      :width="1000"
      @confirm="submitStartCheck"
      :formRef="formRef"
      :destory="true"
    >
      <el-tabs
        :stretch="true"
        v-model="formData.Type"
        @tab-click="StartCheckTabChange"
      >
        <el-tab-pane label="审核通过" name="1">
          <div class="bgw r10 mgb10 box-shadow">
            <div class="subTitle">设置试讲信息</div>
            <hr class="hrLine" />
            <el-form
              :model="formData"
              :rules="rules"
              inline
              :label-width="110"
              ref="formRefPass"
            >
              <el-row :gutter="14">
                <el-col :span="6">
                  <el-form-item label="" prop="DevCourse.TryPlace">
                    <div class="formItemLabel">试讲地点</div>
                    <Selector
                      category="场地级联"
                      cascader="级联"
                      v-model="formData.DevCourse.TryPlace"
                    ></Selector>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="DevCourse.TryTime_Start">
                    <div class="formItemLabel">试讲开始时间</div>
                    <MyDateTime
                      v-model="formData.DevCourse.TryTime_Start"
                      :disable="true"
                      :maxTime="formData.DevCourse.TryTime_End"
                    ></MyDateTime>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="DevCourse.TryTime_End">
                    <div class="formItemLabel">预计结束时间</div>
                    <MyDateTime
                      v-model="formData.DevCourse.TryTime_End"
                      :minTime="formData.DevCourse.TryTime_Start"
                      :disable="true"
                    ></MyDateTime>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label=""
                    prop="DevCourse.TryReviewer"
                    @click="ShowLastApproval"
                  >
                    <div class="formItemLabel">试讲最终评审人</div>
                    <el-input
                      v-model="formData.DevCourse.TryReviewerName"
                      placeholder="请选择"
                      readonly
                      style="width: 212px"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <MyTable
            :toolbar="false"
            :tableList="formData.DevParticipants"
            :columns="TryPersonColumns"
            :btnList="['delete']"
            @delete="handleTryPersonDelete"
          >
            <template v-slot:tabTop>
              <div class="subTitle" style="width: 100%">试讲参与人员</div>
              <hr class="hrLine" />
            </template>
            <template v-slot:secondRow>
              <el-button type="primary" @click="ShowChooseTryPerson = true"
                >选择人员</el-button
              >
            </template>
          </MyTable>
        </el-tab-pane>
        <el-tab-pane label="关闭申请" name="2">
          <div class="subTitle" style="width: 100%">关闭说明</div>
          <hr class="hrLine" />
          <el-form
            :model="formData"
            :rules="rules"
            inline
            :label-width="110"
            ref="formRefClose"
            class="wid100"
          >
            <el-form-item label="" prop="Remark">
              <el-input
                v-model="formData.Remark"
                placeholder="请输入关闭说明"
                clearable
                type="textarea"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </MyDialog>
    <MyDialog
      v-model:show="ShowChooseTryPerson"
      title="试讲参与人员选择"
      :destroy="true"
      :width="1000"
      @confirm="submitBindTryPerson"
    >
      <UserTable
        :userColumns="userColumns"
        v-model:checkList="bindTryPersonData"
        :showAdd="false"
      ></UserTable>
    </MyDialog>
    <MyDialog
      v-model:show="ShowEndCheck"
      title="终审提交"
      :width="1000"
      @confirm="submitEndCheck"
      :formRef="formRef"
    >
      <el-tabs
        :stretch="true"
        v-model="formData.Type"
        @tab-click="StartCheckTabChange"
      >
        <el-tab-pane label="审核通过" name="1"> </el-tab-pane>
        <el-tab-pane label="关闭申请" name="2"> </el-tab-pane>
      </el-tabs>
      <el-input
        type="textarea"
        v-model="formData.Remark"
        :autosize="{ minRows: 6 }"
        :placeholder="formData.Type == 1 ? '通过说明' : '关闭说明'"
      ></el-input>
    </MyDialog>
    <!-- 详情 -->
    <MyDialog
      v-model:show="ShowCourseDetail"
      title="课程详情"
      :width="1000"
      :showFooter="false"
    >
      <CourseDeveDetail :DetailData="CourseDetailData" />
    </MyDialog>
    <!-- 设置评审人员 -->
    <MyDialog
      v-model:show="ShowChooseTryTalkApproval"
      :title="title"
      :destroy="true"
      :width="1000"
      @confirm="submitBindTryTalkApproval"
    >
      <UserTable
        :userColumns="userApprovalColumns"
        @radio="handleRadio"
        :showAdd="false"
      ></UserTable>
    </MyDialog>
  </div>
</template>

<script setup name="Development">
import { ref, getCurrentInstance, onMounted } from 'vue';
import DeviceTable from '@/views/teachingDevice/DeviceAccount/index';
import UserTable from '@/views/system/User/index';
import CourseDeveDetail from '@/views/lesson/Development/CourseDeveDetail';
import useUserStore from '@/store/modules/user.js';
import {
  AddNewCourse,
  SetTryTalk,
  SetDevCourseReviewer,
  FinishTryTalk,
  GetDevCourseFinalTrialList_Page,
  GetDevCourseTryTalkList_Page,
  GetDevCourseFirstTrialList_Page,
  GetDevCourseDetail,
  DelNewCourse,
  RejectClose,
  GetDevCourseCloseList_Page,
  PassFinalTrial
} from '@/api/lesson/lessonDev.js';
const UserInfo = computed(() => useUserStore().userInfo);
const { proxy } = getCurrentInstance();
const tableList = ref([{}]);
const Total = ref(0);
const DeveType = ref('1');
const columns = ref([
  { label: '序号' },
  { label: '单据号', prop: 'Order', link: true },
  { label: '课程名称', prop: 'Name' },
  { label: '授课形式', prop: 'Mode' },
  { label: '授课教师', prop: 'Name_Teacher' },
  { label: '创建时间', prop: 'CreateTime' },
  { label: '操作', width: 160 }
]);
proxy.$formatKey(columns.value);
const customBtn = ref([
  { name: '初审', rule: { key: 'HasPower', status: true } },
  { name: '删除', rule: {}, color: 'red' }
]);

const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Order: '', //单据号
  Name: '', //课程名称
  Mode: '', //授课类型
  Teacher: '', //授课教师ID
  StartTime: '', //开始时间（yyyy-MM-dd HH:mm:ss）
  EndTime: '', //结束时间
  Place: '', //场地ID
  NoPage: ''
});
const queryRef = ref();
const show = ref(false);
const ShowChooseTryTalkApproval = ref(false);
const title = ref();
const formRef = ref();
const formRefPass = ref({});
const formRefClose = ref({});
const rules = ref({
  'DevCourse.Name': [{ required: true, message: '请输入', trigger: 'blur' }],
  'DevCourse.ID_Type': [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  'DevCourse.Mode': [{ required: true, message: '请选择', trigger: 'change' }],
  LessonPlan: [{ required: true, message: '请选择', trigger: 'change' }],
  Courseware: [{ required: true, message: '请选择', trigger: 'change' }],
  'DevCourse.TryTime_Start': [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  'DevCourse.TryTime_End': [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  'DevCourse.TryPlace': [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  'DevCourse.TryReviewer': [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  Remark: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const formData = ref({
  DevCourse: {}
});
const deviceList = ref([]);
const bindDeviceData = ref([]);
const ChooseDdeviceColumns = ref([
  { label: '序号' },
  { label: '设备编号', prop: 'Code' },
  { label: '设备名称', prop: 'Name' },
  { label: '操作' }
]);
proxy.$formatKey(ChooseDdeviceColumns.value);
const ShowChooseDevice = ref(false);
const deviceColumns = ref([
  { label: '多选框' },
  { label: '序号' },
  { label: '编号', prop: 'Code', link: true, self: true },
  { label: '名称', prop: 'Name' },
  { label: '图片', prop: 'ShowPictrue', img: true },
  { label: '区域', prop: 'Area' },
  { label: '场地', prop: 'Place' },
  { label: '规格型号', prop: 'Model' },
  { label: '过程状态', tag: true, prop: 'StateName' },
  { label: '类型', prop: 'Type' },
  { label: '应用范围', prop: 'Place' }
  // { label: '操作', width: 200 }
]);
proxy.$formatKey(deviceColumns.value);
const ShowStartCheck = ref(false);
const ShowEndCheck = ref(false);
const ShowCourseDetail = ref(false);
const ShowChooseTryPerson = ref(false);

const TryPersonColumns = ref([
  { label: '序号' },
  { label: '姓名', prop: 'Name' },
  { label: '类别', prop: 'TypeName' },
  { label: '操作' }
]);
proxy.$formatKey(TryPersonColumns.value);
const userColumns = ref([
  { label: '多选框' },
  { label: '序号' },
  { label: '用户名称', prop: 'Name' },
  { label: '用户类型', prop: 'type' },
  { label: '状态', tag: true, prop: 'tags' },
  { label: '电话号码', prop: 'Phone' }
]);
const userApprovalColumns = ref([
  { label: '单选框' },
  { label: '序号' },
  { label: '用户名称', prop: 'Name' },
  { label: '用户类型', prop: 'type' },
  { label: '状态', tag: true, prop: 'tags' },
  { label: '电话号码', prop: 'Phone' }
]);
proxy.$formatKey(userColumns.value);
const bindTryPersonData = ref([]);
const CourseDetailData = ref({});
const bindTryPersonApprovalData = ref({});
onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res;
    switch (DeveType.value) {
      case '1':
        res = await GetDevCourseFirstTrialList_Page(query);
        break;
      case '2':
        res = await GetDevCourseTryTalkList_Page(query);
        break;
      case '3':
        res = await GetDevCourseFinalTrialList_Page(query);
        break;
      case '4':
        res = await GetDevCourseCloseList_Page(query);
        let CloseType = {
          1: '初审不通过',
          2: '终审不通过',
          3: '审核通过'
        };
        let CloseColor = {
          1: 'danger',
          2: 'danger',
          3: 'success'
        };
        res.data.List?.forEach(item => {
          item.tags = [
            {
              name: CloseType[item.Close_Result],
              type: CloseColor[item.Close_Result]
            }
          ];
        });
        break;
    }
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function submitEndCheck() {
  try {
    console.log(formData.value);
    let query = {
      ID: formData.value?.DevCourse?.ID,
      Remark: formData.value?.Remark
    };
    switch (formData.value.Type) {
      case '1':
        await PassFinalTrial(query);
        break;
      case '2':
        await RejectClose(query);
        break;
    }
    proxy.$modal.msgSuccess('提交成功');
    getList();
    ShowEndCheck.value = false;
  } catch (error) {
    console.log(error);
  }
}

function ShowLastApproval() {
  title.value = '试讲最终评审人';
  bindTryPersonApprovalData.value = {};
  ShowChooseTryTalkApproval.value = true;
}

function handleRadio(val) {
  bindTryPersonApprovalData.value = val;
}

function handleSetApproval() {
  title.value = '设置评审人员';
  bindTryPersonApprovalData.value = {};
  ShowChooseTryTalkApproval.value = true;
}
//提交设置评审人员
async function submitBindTryTalkApproval() {
  try {
    switch (title.value) {
      case '设置评审人员':
        await SetDevCourseReviewer({
          UserID: bindTryPersonApprovalData.value?.ID
        });
        break;
      case '试讲最终评审人':
        formData.value.DevCourse.TryReviewer =
          bindTryPersonApprovalData.value?.ID;
        formData.value.DevCourse.TryReviewerName =
          bindTryPersonApprovalData.value?.Name;
        break;
    }
    proxy.$modal.msgSuccess('设置成功');
    ShowChooseTryTalkApproval.value = false;
  } catch (error) {
    console.log(error);
  }
}

async function handleLink(row) {
  try {
    let res = await GetDevCourseDetail({ ID: row.ID });
    let UserType = {
      1: '学生',
      2: '职员',
      3: '管理员'
    };
    res.data?.Participants?.forEach(item => {
      item.TypeName = UserType[item.Type];
    });
    CourseDetailData.value = res.data;
    ShowCourseDetail.value = true;
  } catch (error) {
    console.log(error);
  }
}

function StartCheckTabChange(val) {
  console.log(val.paneName);
  switch (val.paneName) {
    case '1':
      formRef.value = formRefPass.value;
      break;
    case '2':
      formRef.value = formRefClose.value;
      break;
  }
}

function handleTryPersonDelete(row) {
  formData.value.DevParticipants = formData.value.DevParticipants?.filter(
    item => item.ID != row.ID
  );
}

const UserType = {
  1: '学生',
  2: '职员',
  3: '管理员'
};

function submitBindTryPerson() {
  bindTryPersonData.value?.forEach(item => {
    item.TypeName = UserType[item.Type];
  });
  formData.value.DevParticipants = bindTryPersonData.value;
  ShowChooseTryPerson.value = false;
}

async function CreateStartCheck(val) {
  if (val) {
    let query = {
      ...formData.value,
      LessonPlan: formData.value?.LessonPlan?.map(item => {
        return {
          FileID: item.ID
        };
      }),
      Courseware: formData.value?.Courseware?.map(item => {
        return {
          FileID: item.ID
        };
      }),
      DevBindDevices: deviceList.value?.map(item => {
        return {
          ID_Device: item.ID,
          Code: item.Code,
          Name: item.Name
        };
      })
    };
    try {
      await AddNewCourse(query);
      proxy.$modal.msgSuccess('提交成功');
      getList();
      show.value = false;
    } catch (error) {
      console.log(error);
    }
  }
}

async function submitStartCheck(val) {
  console.log(val);
  if (val) {
    try {
      let query = {
        ...formData.value,
        DevParticipants: formData.value.DevParticipants?.map(item => {
          return {
            Participants: item.ID
          };
        })
      };
      console.log(formData.value);
      switch (formData.value.Type) {
        case '1':
          await SetTryTalk(query);
          break;
        case '2':
          await RejectClose({
            ID: formData.value.DevCourse.ID,
            Remark: formData.value.Remark
          });
          break;
      }
      proxy.$modal.msgSuccess('提交成功');
      ShowStartCheck.value = false;
      getList();
    } catch (error) {
      console.log(error);
    }
  }
}

function submitBindDevice() {
  deviceList.value = bindDeviceData.value;
  ShowChooseDevice.value = false;
}

function handleDeviceDelete(row) {
  deviceList.value = deviceList.value?.filter(item => item.ID != row.ID);
}

async function handleTabClick(val) {
  switch (val.paneName) {
    case '1':
      columns.value = [
        { label: '序号' },
        { label: '单据号', prop: 'Order', link: true },
        { label: '课程名称', prop: 'Name' },
        { label: '授课形式', prop: 'Mode' },
        { label: '授课教师', prop: 'Name_Teacher' },
        { label: '创建时间', prop: 'CreateTime' },
        { label: '操作', width: 160 }
      ];
      customBtn.value = [
        { name: '初审', rule: { key: 'HasPower', status: true } },
        { name: '删除', rule: {}, color: 'red' }
      ];
      break;
    case '2':
      columns.value = [
        { label: '序号' },
        { label: '单据号', prop: 'Order', link: true },
        { label: '课程名称', prop: 'Name' },
        { label: '授课形式', prop: 'Mode' },
        { label: '授课教师', prop: 'Name_Teacher' },
        { label: '试讲信息', prop: 'Name_TryPlace' },
        { label: '创建时间', prop: 'CreateTime' },
        { label: '操作', width: 160 }
      ];
      customBtn.value = [{ name: '结束试讲' }];
      break;
    case '3':
      columns.value = [
        { label: '序号' },
        { label: '单据号', prop: 'Order', link: true },
        { label: '课程名称', prop: 'Name' },
        { label: '授课形式', prop: 'Mode' },
        { label: '授课教师', prop: 'Name_Teacher' },
        { label: '创建时间', prop: 'CreateTime' },
        { label: '操作', width: 160 }
      ];
      customBtn.value = [
        { name: '终审', rule: { key: 'HasPower', status: true } }
      ];
      break;
    case '4':
      columns.value = [
        { label: '序号' },
        { label: '单据号', prop: 'Order', link: true },
        { label: '课程名称', prop: 'Name' },
        { label: '授课形式', prop: 'Mode' },
        { label: '授课教师', prop: 'Name_Teacher' },
        { label: '关闭结果', prop: 'tags', tag: true },
        { label: '关闭备注', prop: 'Close_Remark' },
        { label: '创建时间', prop: 'CreateTime' }
      ];

      break;
  }
  proxy.$formatKey(columns.value);
  getList();
}

async function handleCustom(row) {
  switch (row.btnName) {
    case '初审':
      reset();
      formData.value.Type = '1';
      ShowStartCheck.value = true;
      nextTick(() => {
        formRef.value = formRefPass.value;
        formRefPass.value.clearValidate();
        formRefClose.value.clearValidate();
        formData.value = {
          Type: '1',
          DevCourse: {
            ID: row.ID
          },
          DevParticipants: []
        };
      });
      break;
    case '结束试讲':
      try {
        await proxy.$modal.confirm('确认结束该次试讲吗？');
        await FinishTryTalk({ ID: row.ID });
        proxy.$modal.msgSuccess('提交成功');
        getList();
      } catch (error) {
        console.log(error);
      }
      break;
    case '终审':
      reset();
      formData.value.Type = '1';
      ShowEndCheck.value = true;
      setTimeout(() => {
        formData.value = {
          Type: '1',
          DevCourse: {
            ID: row.ID
          }
        };
      });
      break;
    case '删除':
      try {
        await proxy.$modal.confirm('确认删除该次申请吗？');
        await DelNewCourse({ ID: row.ID });
        proxy.$modal.msgSuccess('提交成功');
        getList();
      } catch (error) {
        console.log(error);
      }
      break;
  }
  //   show.value = true;
}
async function handleDelete(row) {}
function handleAdd() {
  title.value = '申请新课程';
  reset();
  deviceList.value = [];
  show.value = true;
  setTimeout(() => {
    formRef.value.clearValidate();
  });
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function reset() {
  formData.value = {
    DevCourse: {}
  };
}
function resetQuery() {
  queryParams.value = {
    Order: '', //单据号
    Name: '', //课程名称
    Mode: '', //授课类型
    Teacher: '', //授课教师ID
    StartTime: '', //开始时间（yyyy-MM-dd HH:mm:ss）
    EndTime: '', //结束时间
    Place: '', //场地ID
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped>
.title {
  line-height: var(--el-dialog-font-line-height);
  font-size: var(--el-dialog-title-font-size);
  color: var(--el-text-color-primary);
}
.subTitle {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding-top: 10px;
  width: 100%;
}
.mybtn {
  color: #356df2;
  padding: 4px 20px;
  height: 40px;
  border-radius: 20px;
  line-height: 32px;
  cursor: pointer;
}
.mybtn.active {
  color: white;
  background-color: #356df2;
}
.formItemLabel {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: rgb(126, 125, 125);
  width: 100%;
}
:deep(.el-form) {
  .el-row {
    .el-col {
      .el-form-item {
        margin-right: 0 !important;
        .el-form-item__content {
          justify-content: center;
          .selector {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}
.hrLine {
  border-color: #e4e7ed;
  opacity: 0.3;
  width: 80%;
  margin-bottom: 10px;
}
</style>
